<template>
  <div>
    <BasicModal
      @register="registerModal"
      v-bind="$attrs"
      :closeFunc="handleClose"
      @ok="handleSubmit"
      ok-text="保存"
    >
      <div class="mb-20px">
        <Steps :current="current" size="default">
          <Step title="设备详细信息" />
          <Step title="凭据" describe="Optional" />
        </Steps>
      </div>
      <div>
        <BasicForm v-show="current == 0" @register="registerForm" />
        <Tabs v-model:activeKey="activeKey" v-show="current == 1" @change="handleChange">
          <TabPane
            v-for="item in tabsFormList"
            :key="item.key"
            v-bind="omit(item, ['Form', 'key'])"
          >
            <BasicForm @register="item.Form[0]" />
          </TabPane>
        </Tabs>
      </div>
    </BasicModal>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form';
  import { schemas, tabsFormList } from './addDeviceModal.data';
  import { omit } from 'lodash-es';
  import { Tabs, TabPane } from 'ant-design-vue';
  import { Step, Steps } from 'ant-design-vue';
  import { modalFormStyleSetting, modalStyleSetting } from '/@/settings/thingsBoardDesign';
  let current = ref(0);
  let activeKey = ref('Access Token');
  const emit = defineEmits(['success']);
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async () => {
    setModalProps({
      title: '添加设备',
      ...modalStyleSetting,
    });
  });

  const [registerForm, { validate, resetFields, getFieldsValue }] = useForm({
    layout: 'vertical',
    schemas,
    showSubmitButton: true,
    showResetButton: false,
    submitButtonOptions: { text: '下一步：凭据' },
    ...modalFormStyleSetting,
    actionColOptions: {
      span: 24,
    },
    submitFunc: async () => {
      try {
        await validate();
        current.value++;
        for (const item of tabsFormList) {
          const { setProps } = item.Form[1];
          setProps({
            submitFunc: async () => {
              current.value--;
            },
          });
        }
      } catch (e) {}
    },
  });

  async function handleClose() {
    resetFields();
    for (const item of tabsFormList) {
      const { resetFields } = item.Form[1];
      resetFields();
    }
    current.value = 0;
    return true;
  }
  async function handleSubmit() {
    let values: Recordable = {};
    if (current.value == 0) {
      try {
        await validate();
        values = { ...values, ...getFieldsValue() };
        setModalProps({ confirmLoading: true });
        emit('success', {
          key: 'basicAdd',
          values: { ...values },
        });
        closeModal();
        resetFields();
        setModalProps({ confirmLoading: false });
      } catch (error) {}
    } else {
      try {
        await validate();
        values = { ...values, ...getFieldsValue() };
        for (const item of tabsFormList) {
          if (item.key == activeKey.value) {
            const { validate, getFieldsValue } = item.Form[1];
            await validate();
            values = { ...values, ...getFieldsValue() };
          }
        }
        setModalProps({ confirmLoading: true });
        emit('success', {
          key: 'addWithCredentials',
          values: {
            ...values,
            credentialsType: activeKey.value,
          },
        });
        current.value--;
        closeModal();
        resetFields();
        activeKey.value = 'Access Token';
        setModalProps({ confirmLoading: false });
      } catch (error) {}
    }
  }
  function handleChange() {
    for (const item of tabsFormList) {
      const { resetFields } = item.Form[1];
      resetFields();
    }
  }
</script>
